let btn = document.querySelector('.submit-btn')
btn.onclick = () => {
  // 1 创建对象
  let xhr = null
  if (XMLHttpRequest) {
    xhr = new XMLHttpRequest()
  } else {
    xhr = new ActiveXObject('Microsoft.XMLHTTP')
  }

  // 2 监听准备状态变化
  xhr.onreadystatechange = function () {
    // 6 当请求数据已经处理结束并且网络状态一切正常
    if (xhr.readyState === 4 && xhr.status === 200) {
      // 7 获得请求的数据
      let data = xhr.responseText
      // 8 data 是一个json字符串，转换为json对象
      let res = JSON.parse(data)
      console.log(res)
      // 9 判断登录是否成功,code=200说明登录成功，否则就是登录失败
      if (res.code !== 200) {
        return alert(res.msg)
      }
      alert(res.msg)
      // 10 保存数据到sessionStorage
      sessionStorage.setItem('USER_LOGIN', JSON.stringify(res))
      console.log(res.msg)
      // 11 跳转到用户列表界面
      location = './users.html'
    }
  }

  // 3 设置请求方法，接口地址，是否异步
  xhr.open('POST', 'http://146.56.230.35:3007/users/login', true)

  // 4 设置请求头
  xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded')

  // 5 发送请求
  let username = document.querySelector('.username').value
  let password = document.querySelector('.password').value
  // 传递参数username和userPassword，是服务器约定好的属性，不能随便定义
  xhr.send(`username=${username}&userPassword=${password}`)
}
